import _ from 'lodash';
export default class Play {
  constructor(option = {}) {
    /* 初始化数据 */
    this.playArray = new Array(4).fill(0).map(() => new Array(4).fill(0));
    // this.playArray = [
    //   [2, 4, 8, 16],
    //   [4, 2, 16, 8],
    //   [8, 16, 4, 2],
    //   [16, 8, 2, 4],
    // ];

    //给每个格子设置颜色
    this.cellColors = option.cellColors;
    this.themeColor = option.themeColor;
    this.setShow = option.setShow;
    this.setScore = option.setScore;
    this.init();
  }
  /* 初始化函数 */
  init() {
    this.getRestItem();
    this.render();
    this.addEvent();
  }
  /**
   * 从剩余为0格子生成一个2或者4
   */
  getRestItem() {
    let _new = []; //用于存放值为0的位置的数组[{i,j}]
    let count = 0, //用于统计
      cnt = 0;
    //获取值为0的位置
    for (let i = 0; i < 4; i++) {
      for (let j = 0; j < 4; j++) {
        if (this.playArray[i][j] === 0) {
          _new.push({ i, j });
        }
      }
    }
    // if (playArrayClone) {
    //   for (let p = 0; p < 4; p++) {
    //     for (let s = 3; s >= 0; s--) {
    //       if (this.playArray[p][s] == playArrayClone[p][s]) {
    //         cnt++;
    //         if (cnt == 16 && _new.length > 0) {
    //           return;
    //         }
    //       }
    //     }
    //   }
    // }
    //生成随机2或4
    if (_new.length > 0) {
      let index = _.random(0, _new.length - 1, false);
      let num = _.random(1, 10) > 6 ? 4 : 2;
      this.playArray[_new[index].i][_new[index].j] = num;
    } else {
      //判断该数是否与上下左右都不相等
      for (let i = 0; i < 4; i++) {
        for (let j = 0; j < 4; j++) {
          let current = this.playArray[i][j]; //当前循环数
          let top = this.playArray[i - 1] ? this.playArray[i - 1][j] : null; //上方
          let bottom = this.playArray[i + 1] ? this.playArray[i + 1][j] : null; //下方
          let left = this.playArray[i][j - 1] ? this.playArray[i][j - 1] : null;
          let right = this.playArray[i][j + 1]
            ? this.playArray[i][j + 1]
            : null;
          if (
            current !== top &&
            current !== bottom &&
            current !== left &&
            current !== right
          ) {
            count++;
            if (count >= 16) {
              this.setShow(true);
              // let gameover = document.querySelector('.gameover');
              // gameover.style.display = 'block';
              // this.tryAgain();
              return;
            }
          }
        }
      }
    }
    console.log('playArray', this.playArray);
  }
  /**
   * 渲染页面
   */
  render() {
    const cell = document.getElementsByClassName('grid-cell');
    for (let i = 0; i < 4; i++) {
      for (let j = 0; j < 4; j++) {
        const index = i * 4 + j;
        const num = this.playArray[i][j];
        switch (num) {
          case 0:
            cell[index].style.backgroundColor = this.themeColor;
            cell[index].innerHTML = '';
            break;
          case 2:
            cell[index].style.backgroundColor = this.cellColors[0];
            cell[index].innerHTML = num;
            break;
          case 4:
            cell[index].style.backgroundColor = this.cellColors[1];
            cell[index].innerHTML = num;
            break;
          case 8:
            cell[index].style.backgroundColor = this.cellColors[2];
            cell[index].innerHTML = num;
            break;
          case 16:
            cell[index].style.backgroundColor = this.cellColors[3];
            cell[index].innerHTML = num;
            break;
          case 32:
            cell[index].style.backgroundColor = this.cellColors[4];
            cell[index].innerHTML = num;
            break;
          case 64:
            cell[index].style.backgroundColor = this.cellColors[5];
            cell[index].innerHTML = num;
            break;
          default:
            cell[index].style.backgroundColor = this.cellColors[5];
            break;
        }
      }
    }
  }
  /* 事件绑定函数 */
  addEvent() {
    /* 绑定键盘事件 */
    document.body.onkeydown = (e) => {
      switch (e.keyCode) {
        case 37:
          this.moveLeft();
          break;
        case 38:
          this.moveUp();
          break;
        case 39:
          this.moveRight();
          break;
        case 40:
          this.moveDown();
          break;
        default:
          break;
      }
    };
  }
  moveLeft() {
    for (let i = 0; i < 4; i++) {
      let num = 0; //用于获取上个位置的索引
      for (let j = 0; j < 4; j++) {
        if (this.playArray[i][j] > 0) {
          if (num < j) {
            this.playArray[i][num++] = this.playArray[i][j];
            this.playArray[i][j] = 0;
          } else {
            this.playArray[i][num++] = this.playArray[i][j];
          }
        }
      }
      for (let j = 0; j < 4; j++) {
        if (
          this.playArray[i][j] > 0 &&
          this.playArray[i][j + 1] > 0 &&
          this.playArray[i][j + 1] === this.playArray[i][j]
        ) {
          this.playArray[i][j] =
            this.playArray[i][j] + this.playArray[i][j + 1];
          this.playArray[i][j + 1] = 0;
        }
      }
    }
    console.log('this.playArray', this.playArray);
    this.render();
    this.countScore();
    this.getRestItem();
    setTimeout(() => {
      this.render();
    }, 500);
  }
  moveUp() {
    for (let i = 0; i < 4; i++) {
      let num = 0; //用于获取上个位置的索引
      for (let j = 0; j < 4; j++) {
        if (this.playArray[j][i] > 0) {
          if (num < j) {
            this.playArray[num++][i] = this.playArray[j][i];
            this.playArray[j][i] = 0;
          } else {
            this.playArray[num++][i] = this.playArray[j][i];
          }
        }
      }

      for (let j = 0; j < 3; j++) {
        if (
          this.playArray[j][i] > 0 &&
          this.playArray[j + 1][i] > 0 &&
          this.playArray[j + 1][i] === this.playArray[j][i]
        ) {
          this.playArray[j][i] =
            this.playArray[j][i] + this.playArray[j + 1][i];
          this.playArray[j + 1][i] = 0;
        }
      }
    }
    this.render();
    this.getRestItem();
    this.countScore();
    setTimeout(() => {
      this.render();
    }, 500);
  }
  moveRight() {
    for (let i = 0; i < 4; i++) {
      let num = 3; //用于获取上个位置的索引
      for (let j = 3; j > 0; j--) {
        if (this.playArray[i][j] > 0) {
          if (num > j) {
            this.playArray[i][num--] = this.playArray[j][i];
            this.playArray[j][i] = 0;
          } else {
            this.playArray[i][num--] = this.playArray[j][i];
          }
        }
      }
      for (let j = 3; j > 0; j--) {
        if (
          this.playArray[i][j] > 0 &&
          this.playArray[i][j - 1] > 0 &&
          this.playArray[i][j - 1] === this.playArray[i][j]
        ) {
          this.playArray[i][j] =
            this.playArray[i][j] + this.playArray[i][j - 1];
          this.playArray[i][j - 1] = 0;
        }
      }
    }
    this.countScore();
    this.getRestItem();
    setTimeout(() => {
      this.render();
    }, 500);
  }
  moveDown() {
    for (let i = 0; i < 4; i++) {
      let num = 3; //用于获取上个位置的索引
      for (let j = 3; j > 0; j--) {
        if (this.playArray[j][i] > 0) {
          if (num > j) {
            this.playArray[num--][i] = this.playArray[j][i];
            this.playArray[j][i] = 0;
          } else {
            this.playArray[num--][i] = this.playArray[j][i];
          }
        }
      }
      for (let j = 3; j > 0; j--) {
        if (
          this.playArray[j][i] > 0 &&
          this.playArray[j - 1][i] > 0 &&
          this.playArray[j - 1][i] === this.playArray[j][i]
        ) {
          this.playArray[j][i] =
            this.playArray[j][i] + this.playArray[j - 1][i];
          this.playArray[j - 1][i] = 0;
        }
      }
    }
    this.countScore();
    this.getRestItem();
    setTimeout(() => {
      this.render();
    }, 500);
  }
  /* 新开始 */
  newGame() {
    /* 清零 */
    for (let i = 0; i < 4; i++) {
      for (let j = 0; j < 4; j++) {
        this.playArray[i][j] = 0;
      }
    }
    this.countScore();
    this.getRestItem();
    this.render();
  }
  /* 计算得分 */
  countScore() {
    let sum = 0;
    for (let i = 0; i < 4; i++) {
      for (let j = 0; j < 4; j++) {
        this.playArray[i][j] > 2 && (sum += this.playArray[i][j]);
      }
    }
    this.setScore(sum);
  }
  /**
   * 再来一次
   */
  tryAgain() {
    for (let i = 0; i < 4; i++) {
      for (let j = 0; j < 4; j++) {
        this.playArray[i][j] = 0;
      }
    }
    this.setShow(false);
    this.countScore();
    this.render();
  }
}
